<template>
  <div class="home">
    <Header />
    <el-container class="content">
      <Menu />
      <el-container class="main-content">
        <el-main>
          <Breadcrumnb class="breadcrumnb" />
          <div class="main">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/common/Header.vue";
import Footer from "@/components/common/Footer.vue";
import Menu from "@/components/common/Menu.vue";
import Breadcrumnb from "@/components/common/Breadcrumb.vue";

export default {
  name: "MyHome",
  components: {
    Header,
    Footer,
    Menu,
    Breadcrumnb,
  },
  data() {
    return {
      msg: "home 组件",
    };
  },
  methods: {
    async test() {
      // 测试是否携带 authorization请求头
      const res = await this.$http.get("/test");
      // console.log(res);
    },
  },
  created() {
    this.test();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.home {
  height: 100%;
  .content {
    // width: 100%;
    height: 92%;
    .main-content {
      height: 100%;
      .main {
        margin-top: 30px;
      }
    }
  }
}
</style>
